/*
 * APP 弹窗管理列表
 * @Author: ice
 * @Date: 2019-07-30 15:45:10
 * @Last Modified by: ice
 * @Last Modified time: 2019-07-30 17:13:02
 */

<template>
    <div class="container task-list-container">
        <div class="operation-wrapper">
            <el-button
                type="primary"
                @click="fnShowAdd()"
                size="small"
            >新增弹窗</el-button>
        </div>
        <div class="content-wrapper">
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;"
                >
                    <el-table-column
                        fixed="left"
                        header-align="left"
                        align="center"
                        :width="50"
                        label="序号"
                    >
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        width="180"
                        label="弹窗图片"
                    >
                        <template slot-scope="scope">
                            <img
                                :src="scope.row.pic_url"
                                class="table-image"
                            >
                        </template>
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        prop="button_title"
                        label="按钮文字"
                    />
                    <el-table-column
                        show-overflow-tooltip
                        prop="link_url"
                        label="按钮链接"
                    >
                        <template slot-scope="scope">
                            <template v-if="scope.row.image_url == ''">
                                --
                            </template>
                            <template v-else-if="scope.row.image_url.indexOf('http') == 0">
                                <a
                                    :href="scope.row.image_url"
                                    class="table-link"
                                    :disabled="scope.row.image_url == '' ? true : false"
                                    target="_blank"
                                >{{ scope.row.image_url }}</a>

                            </template>
                            <template v-else>{{ scope.row.image_url }}</template>
                    </template></el-table-column>
                    <el-table-column
                        prop="start_time"
                        width="150"
                        label="开始时间"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.start_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="start_time"
                        width="150"
                        label="结束时间"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.end_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="status"
                        width="100"
                        show-overflow-tooltip
                        label="状态"
                    >
                        <template slot-scope="scope">
                            <template v-if="scope.row.time_status == 0">未开始</template>
                            <template v-else-if="scope.row.time_status == 1 && scope.row.status == 1">已上架</template>
                            <template v-else-if="scope.row.time_status == 1 && scope.row.status == 1">已上架</template>
                            <template v-else-if="scope.row.time_status == 2">已结束</template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="create_time"
                        width="150"
                        label="创建时间"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="date"
                        label="操作"
                        fixed="right"
                        :width="150"
                    >
                        <template slot-scope="scope">
                            <div>
                                <el-button
                                    type="text"
                                    @click="fnShowAdd(scope.row)"
                                >编辑</el-button>
                                <el-button
                                    type="text"
                                    style="margin-left:10px;"
                                    :disabled="scope.row.time_status == 2"
                                    @click="fnChangeBidStatus(scope.row.popup_no, scope.row.status)"
                                >
                                    <template v-if="scope.row.status == 1">下架</template>
                                    <template v-if="scope.row.status == 0">上架</template>
                                </el-button>
                                <el-button
                                    type="text"
                                    @click="fnDelete(scope.row.popup_no)"
                                >删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                />
            </div>
        </div>
        <confirm-dialog
            ref="confirmDialog"
            @submit="getTableData()"/>
    </div>
</template>

<script>
import confirmDialog from '@/components/student/confirm/confirm-add';
export default {
    components: {
        confirmDialog
    },
    data() {
        return {
            authResult: {},
            tableData: [],
            filterData: {
                title: ''
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            baseUrl: '',
            mobileUrl: '',
            escape: escape,
            sessionTicket: localStorage.getItem('sessionTicket')
        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.baseUrl = this.$baseUrl;
        this.mobileUrl = location.host == 'phaadmin.wxhand.com' ? 'http://class.zsdx.cn' : 'http://task.wxhand.com';
        this.$store.commit('SET_HEADER', [
            {
                title: "校园代理",
            },
            {
                title: '弹窗管理'
            }
        ]);
        this.getTableData();
    },
    mounted() {
    },
    methods: {
        fnShowAdd(data){
            this.$refs.confirmDialog.fnShow(data);
        },
        fnChangeBidStatus(item) {
            this.$post('/student/popup%5Cset_status', {
                popup_no: item.popup_no,
                status: item.status == 1 ? 0 : 1
            }, resp => {
                if (resp.code == 1) {
                    this.$set(item, 'status', item.status == 1 ? 0 : 1);
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                        center: true
                    });
                }
            });
        },
        fnDelete(id){
            this.$confirm('确认删除当前弹窗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('', {
                    id: id
                }, resp => {
                    if(resp.code == 1){
                        this.$message({
                            type: 'success',
                            message: '操作成功',
                            center: true
                        });
                    }else{
                        this.$message({
                            type: 'warning',
                            message: resp.msg || '操作失败',
                            center: true
                        });
                    }
                });
            }).catch(() => {
            });
        },
        /**
       * 获取表格数据
       */
        getTableData(page) {
            this.$post('/student/popup%5Cget_list', {
                page_id: page || this.page.now_page
            }, resp => {
                if (resp.code == 1) {
                    if(resp.data.tableData.length == 0 && resp.data.page.now_page > 1){
                        this.getTableData(resp.data.page.now_page-1);
                        return ;
                    }
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
       * 列表渲染辅助函数：列表项为空处理
       */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
  .container {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .operation-wrapper {
    display: flex;
    flex-direction: row-reverse;
    padding: 12px 23px;
    background-color: #fff;

    .el-button {
      margin-left: 10px;
    }
  }
  .content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
  }
  .search-wrapper {
    padding: 15px;
    background-color: #fff;
  }
  .filter-item {
    .el-form-item {
      margin-bottom: 0;
      white-space: nowrap;
    }
    .el-input {
      width: auto;
      vertical-align: middle;
    }
    .el-button {
      margin-left: 15px;
      vertical-align: middle;
    }
  }
  .table-wrapper {
    flex: 1;
    background-color: #fff;
    .table-image {
      width: 150px;
    }
    .table-link {
      color: #409eff;
    }
    .el-button {
      padding: 0;
    }
    .icon-bianji {
      font-size: 14px;
      color: #b9b9b9;
      cursor: pointer;
    }
    .btn-delete {
      color: #fd4d32;
      &.is-disabled {
        color: #c0c4cc;
        cursor: not-allowed;
      }
    }
    .submit-config-item {
      display: inline-block;
      position: relative;
      padding-right: 10px;
      font-size: 14px;

      & + .submit-config-item {
        padding-left: 10px;
        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 0;
          width: 1px;
          height: 14px;
          transform: translate(0, -50%);
          background-color: #d8d8d8;
        }
      }

      .num {
        vertical-align: middle;
      }
      .iconfont {
        font-size: 16px;
        color: #b9b9b9;
        vertical-align: middle;
      }

      .icon-tupian {
        font-size: 20px;
      }
    }
  }
  .pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
      float: right;
      padding: 0;
      background-color: transparent;
    }
  }
  .dialog-link {
    & + .dialog-link {
      margin-top: 20px;
    }
    .link-label {
      font-weight: 500;
      margin-right: 20px;
    }
    .link-value {
    }
  }
</style>
<style lang="less">
  .task-list-container {
    tbody {
      .cell {
        display: flex;
        align-items: center;
        height: 48px;
      }
    }
  }
  .task-list-preview-popover {
    min-width: auto !important;
    width: 120px !important;
    height: 120px;
    padding: 8px !important;
  }
  .sort-dialog {
    width: 270px !important;
  }
</style>
